<template>
  <div>
    <h4 class="flow-detail-form-title">表单标题</h4>
    <a-form ref="formRef" :model="form" v-bind="layout" layout="horizontal" class="form-excel-style">
      <a-row>
        <a-col v-if="fieldVisible('demoUserId')" v-bind="colLayout.cols">
          <a-form-item name="demoUserId" label="用户" :rules="fieldRequired('demoUserId')" has-feedback>
            <AvicCommonSelect
              v-model:value="form.demoUserId"
              :auto-focus="true"
              type="userSelect"
              :default-show-value="form.demoUserIdAlias"
              :disabled="fieldDisabled('demoUserId')"
              placeholder="请输入用户"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoDeptId')" v-bind="colLayout.cols">
          <a-form-item name="demoDeptId" label="部门" :rules="fieldRequired('demoDeptId')" has-feedback>
            <AvicCommonSelect
              v-model:value="form.demoDeptId"
              type="deptSelect"
              :default-show-value="form.demoDeptIdAlias"
              :disabled="fieldDisabled('demoDeptId')"
              placeholder="请输入部门"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoRoleId')" v-bind="colLayout.cols">
          <a-form-item name="demoRoleId" label="角色" :rules="fieldRequired('demoRoleId')" has-feedback>
            <AvicCommonSelect
              v-model:value="form.demoRoleId"
              type="roleSelect"
              :default-show-value="form.demoRoleIdAlias"
              :disabled="fieldDisabled('demoRoleId')"
              placeholder="请输入角色"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoGroupId')" v-bind="colLayout.cols">
          <a-form-item name="demoGroupId" label="群组" :rules="fieldRequired('demoGroupId')" has-feedback>
            <AvicCommonSelect
              v-model:value="form.demoGroupId"
              type="groupSelect"
              :default-show-value="form.demoGroupIdAlias"
              :disabled="fieldDisabled('demoGroupId')"
              placeholder="请输入群组"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoPositionId')" v-bind="colLayout.cols">
          <a-form-item name="demoPositionId" label="岗位" :rules="fieldRequired('demoPositionId')" has-feedback>
            <AvicCommonSelect
              v-model:value="form.demoPositionId"
              type="positionSelect"
              :default-show-value="form.demoPositionIdAlias"
              :disabled="fieldDisabled('demoPositionId')"
              placeholder="请输入岗位"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoRadio')" v-bind="colLayout.cols">
          <a-form-item name="demoRadio" label="单选" :rules="fieldRequired('demoRadio')" has-feedback>
            <a-radio-group v-model:value="form.demoRadio" :disabled="fieldDisabled('demoRadio')">
              <a-radio v-for="item in lookupList?.PLATFORM_SEX" :key="item.sysLookupTlId" :value="item.lookupCode">
                {{ item.lookupName }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoRadioButton')" v-bind="colLayout.cols">
          <a-form-item name="demoRadioButton" label="单选（按钮）" :rules="fieldRequired('demoRadioButton')" has-feedback>
            <a-radio-group v-model:value="form.demoRadioButton" button-style="solid" :disabled="fieldDisabled('demoRadioButton')">
              <a-radio-button v-for="item in lookupList?.PLATFORM_CHECK_TYPE" :key="item.sysLookupTlId" :value="item.lookupCode">
                {{ item.lookupName }}
              </a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoCheckbox')" v-bind="colLayout.cols">
          <a-form-item name="demoCheckbox" label="复选" :rules="fieldRequired('demoCheckbox')" has-feedback>
            <a-checkbox-group v-model:value="form.demoCheckbox" :disabled="fieldDisabled('demoCheckbox')">
              <a-checkbox v-for="item in lookupList?.PLATFORM_CHECK_TYPE" :key="item.sysLookupTlId" :value="item.lookupCode">
                {{ item.lookupName }}
              </a-checkbox>
            </a-checkbox-group>
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoSelect')" v-bind="colLayout.cols">
          <a-form-item name="demoSelect" label="下拉" :rules="fieldRequired('demoSelect')" has-feedback>
            <a-select
              v-model:value="form.demoSelect"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
              option-filter-prop="children"
              :show-search="true"
              :allow-clear="true"
              :disabled="fieldDisabled('demoSelect')"
              placeholder="请选择下拉"
            >
              <a-select-option v-for="item in lookupList?.PLATFORM_DEGREE" :key="item.sysLookupTlId" :value="item.lookupCode">
                {{ item.lookupName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoSelectMultiple')" v-bind="colLayout.cols">
          <a-form-item name="demoSelectMultiple" label="下拉多选" :rules="fieldRequired('demoSelectMultiple')" has-feedback>
            <a-select
              v-model:value="form.demoSelectMultiple"
              mode="multiple"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
              option-filter-prop="children"
              :allow-clear="true"
              :disabled="fieldDisabled('demoSelectMultiple')"
              placeholder="请输入下拉多选"
            >
              <a-select-option v-for="item in lookupList?.PLATFORM_CHECK_TYPE" :key="item.sysLookupTlId" :value="item.lookupCode">
                {{ item.lookupName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('secretLevel')" v-bind="colLayout.cols">
          <a-form-item name="secretLevel" label="密级" :rules="fieldRequired('secretLevel')" has-feedback>
            <AvicSecretSelect
              v-model:value="form.secretLevel"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
              option-filter-prop="label"
              :show-search="true"
              :allow-clear="true"
              :disabled="fieldDisabled('secretLevel')"
              placeholder="请选择密级"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoSwitch')" v-bind="colLayout.cols">
          <a-form-item name="demoSwitch" label="开关" :rules="fieldRequired('demoSwitch')" has-feedback>
            <a-switch
              v-model:checked="form.demoSwitch"
              checked-value="Y"
              un-checked-value="N"
              checked-children="有效"
              un-checked-children="无效"
              :disabled="fieldDisabled('demoSwitch')"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoNumber')" v-bind="colLayout.cols">
          <a-form-item name="demoNumber" label="小数" :rules="fieldRequired('demoNumber')" has-feedback>
            <a-input-number
              v-model:value="form.demoNumber"
              :min="0"
              :max="9999999999.99"
              :precision="2"
              :step="0.01"
              :disabled="fieldDisabled('demoNumber')"
              placeholder="请输入小数"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoInteger')" v-bind="colLayout.cols">
          <a-form-item name="demoInteger" label="整数" :rules="fieldRequired('demoInteger')" has-feedback>
            <a-input-number
              v-model:value="form.demoInteger"
              :min="0"
              :max="99999999999"
              :precision="0"
              :step="1"
              :disabled="fieldDisabled('demoInteger')"
              placeholder="请输入整数"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoDate')" v-bind="colLayout.cols">
          <a-form-item name="demoDate" label="日期" :rules="fieldRequired('demoDate')" has-feedback>
            <a-date-picker
              v-model:value="form.demoDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled="fieldDisabled('demoDate')"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoDateTime')" v-bind="colLayout.cols">
          <a-form-item name="demoDateTime" label="日期时间" :rules="fieldRequired('demoDateTime')" has-feedback>
            <a-date-picker
              v-model:value="form.demoDateTime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled="fieldDisabled('demoDateTime')"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoNotnull')" v-bind="colLayout.cols">
          <a-form-item name="demoNotnull" label="必填" :rules="fieldRequired('demoNotnull')" has-feedback>
            <a-input v-model:value="form.demoNotnull" :disabled="fieldDisabled('demoNotnull')" placeholder="请输入必填" />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoTextarea')" v-bind="colLayout.cols2">
          <a-form-item name="demoTextarea" label="多行文本" :rules="fieldRequired('demoTextarea')" has-feedback>
            <a-textarea v-model:value="form.demoTextarea" :rows="2" :disabled="fieldDisabled('demoTextarea')" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col v-if="fieldVisible('demoCode')" v-bind="colLayout.cols">
          <a-form-item name="demoCode" label="编码" :rules="fieldRequired('demoCode')" has-feedback>
            <AvicAutoCode
              ref="autoCode"
              v-model:value="form.demoCode"
              code-type="weijb2"
              code-param="DEMO_MAIN_FLOW"
              :allow-clear="true"
              :disabled="fieldDisabled('demoCode')"
              placeholder="请输入编码"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoPhone')" v-bind="colLayout.cols">
          <a-form-item name="demoPhone" label="电话(正则)" :rules="fieldRequired('demoPhone')" has-feedback>
            <a-input v-model:value="form.demoPhone" :disabled="fieldDisabled('demoPhone')" placeholder="请输入电话(正则)" />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoEmail')" v-bind="colLayout.cols">
          <a-form-item name="demoEmail" label="邮箱(正则)" :rules="fieldRequired('demoEmail')" has-feedback>
            <a-input v-model:value="form.demoEmail" :disabled="fieldDisabled('demoEmail')" placeholder="请输入邮箱(正则)" />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoWebsite')" v-bind="colLayout.cols">
          <a-form-item name="demoWebsite" label="网址(正则)" :rules="fieldRequired('demoWebsite')" has-feedback>
            <a-input v-model:value="form.demoWebsite" :disabled="fieldDisabled('demoWebsite')" placeholder="请输入网址(正则)" />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoUnique')" v-bind="colLayout.cols">
          <a-form-item name="demoUnique" label="唯一值" :rules="fieldRequired('demoUnique')" has-feedback>
            <a-input v-model:value="form.demoUnique" :disabled="fieldDisabled('demoUnique')" placeholder="请输入唯一值" />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoModalSelect')" v-bind="colLayout.cols">
          <a-form-item name="demoModalSelect" label="弹窗" :rules="fieldRequired('demoModalSelect')" has-feedback>
            <AvicModalSelect
              v-model:value="form.demoModalSelect"
              :default-show-value="form.demoModalSelect"
              modal-title="选择弹窗"
              placeholder="请选择弹窗"
              value-field=""
              show-field=""
              :select-component="demoSingleSelectComponent"
              :is-multi-selection="false"
              :allow-clear="true"
              :disabled="fieldDisabled('demoModalSelect')"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoBackgroundColor')" v-bind="colLayout.cols">
          <a-form-item name="demoBackgroundColor" label="背景样式" :rules="fieldRequired('demoBackgroundColor')" has-feedback>
            <a-input
              v-model:value="form.demoBackgroundColor"
              :disabled="fieldDisabled('demoBackgroundColor')"
              placeholder="请输入背景样式"
            />
          </a-form-item>
        </a-col>
        <a-col v-if="fieldVisible('demoRichtext')" v-bind="colLayout.cols2">
          <a-form-item name="demoRichtext" label="富文本" :rules="fieldRequired('demoRichtext')" has-feedback>
            <div class="Richtext">
              <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :default-config="toolbarConfig" />
              <Editor
                v-model:value="form.demoRichtext"
                style="height: 500px; overflow-y: auto"
                :default-config="editorConfig"
                @onCreated="onCreated"
              />
            </div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col v-if="fieldVisible('demoText2')" v-bind="colLayout.cols">
          <a-form-item name="demoText2" label="测试文本" :rules="fieldRequired('demoText2')" has-feedback>
            <a-input v-model:value="form.demoText2" :disabled="fieldDisabled('demoText2')" placeholder="请输入测试文本" />
          </a-form-item>
        </a-col>
        <a-col v-if="attachmentAccessibility('uploadFile.file1')" v-bind="colLayout.cols2">
          <a-form-item :name="['uploadFile', 'file1']" label="上传附件" type="attachment" :rules="attachmentRequired('uploadFile.file1')">
            <AvicUploader
              :ref="uploadFile.file1"
              v-model:value="form.uploadFile.file1"
              for="uploadFile.file1"
              element-id="1"
              label="上传附件"
              table-name="DEMO_MAIN_FLOW"
              :form-id="form.id"
              :bpm-instance-object="props.bpmInstanceObject"
              :form-secret-level="form.secretLevel"
              :allow-download="true"
              @afterUpload="afterUploadEvent"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-collapse default-active-key="1" :bordered="false" ghost>
      <template #expandIcon="{ isActive }">
        <caret-right-outlined :rotate="isActive ? 90 : 0" />
      </template>
      <a-collapse-panel key="1" header="主子表示例-子表">
        <DemoSubFlowEdit
          v-if="fieldVisible('DEMO_SUB_FLOW')"
          ref="demoSubFlowEdit"
          :main-id="formId || form.id"
          :bpm-instance-object="bpmInstanceObject"
          :bpm-params="bpmParams"
        />
        <!--子表按钮的流程解析，用于权限控制-->
        <a-button
          class="eform_subtable_bpm_button_auth table-handle-button"
          for="addSubTableButton"
          label="添加"
          title="添加"
          style="display: none"
        >
          添加
        </a-button>
        <a-button
          class="eform_subtable_bpm_button_auth table-handle-button"
          for="editSubTableButton"
          label="编辑"
          title="编辑"
          style="display: none"
        >
          编辑
        </a-button>
        <a-button
          class="eform_subtable_bpm_button_auth table-handle-button"
          for="deleteSubTableButton"
          label="删除"
          title="删除"
          style="display: none"
        >
          删除
        </a-button>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script lang="ts" setup>
import { useDemoMainFlowForm, emits } from './ts/DemoMainFlowForm'; // 引入表单ts
import DemoSubFlowEdit from '@/views/avic/demo/demosubflow/DemoSubFlowEdit.vue'; // 引入子表组件
import demoSingleSelect from '@/views/avic/demo/demosingle/DemoSingleSelect.vue'; // 引入弹窗选择页
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; // 引入富文本依赖
import '@wangeditor/editor/dist/css/style.css'; // 引入富文本样式

const props = defineProps({
  formId: {
    type: String,
    default: ''
  },
  bpmInstanceObject: {
    type: Object,
    default: null
  },
  // 以弹窗方式打开流程详情页时，以组件传参时使用
  params: {
    type: Object,
    required: false,
    default: null
  },
  // 启动流程后，刷新列表的回调函数
  bpmOperatorRefresh: {
    type: Function,
    default: null
  }
});
// 表单存在密级字段时通过该方法进行人员文档密级与表单密级校验，防止低密用户看到高密表单
const checkSecretLevel = inject('checkUserAndFormSecretLevel', Function, true);
// secretLevel参数为表单密级字段名称
checkSecretLevel('secretLevel');
defineEmits(emits);
const demoSingleSelectComponent = demoSingleSelect; // 自定义选择
const {
  form,
  formRef,
  bpmParams,
  layout,
  colLayout,
  lookupList,
  uploadFile,
  afterUploadEvent,
  attachmentRequired,
  attachmentAccessibility,
  autoCode,
  toolbarConfig,
  editorConfig,
  editorRef,
  onCreated,
  demoSubFlowEdit,
  fieldVisible,
  fieldDisabled,
  fieldRequired,
  saveForm,
  saveAndStartProcess,
  beforeClickBpmButtons,
  afterClickBpmButtons
} = useDemoMainFlowForm();
defineExpose({
  saveForm,
  saveAndStartProcess,
  beforeClickBpmButtons,
  afterClickBpmButtons
});
</script>
